<template>
  <div class="header2">
    <a-row class="wm" type="flex" justify="space-between">
      <a-col :span="6">
        <img class="logo" src="https://oss.itemplay.com/logozz.png" />
      </a-col>
      <a-col :span="13" style="position: relative;">
        <div>
          <div class="s-wrap">
            <div class="sw-tab">
              <div @click="changeTab('advanced')" class="st-item" :class="stab == 'advanced' ? 'active' : ''">高级搜索</div>
              <div @click="changeTab('common')" class="st-item" :class="stab == 'common' ? 'active' : ''">普通搜索</div>
            </div>

            <div class="search">
             <div class="adv-wrap" v-if="stab == 'advanced'">
                <div class="adv-item" v-for="(navItem,navIndex) in arrNav" :key="navIndex" @click="selectTag(navIndex)">
                  <div class="tit">{{navItem.name}}</div>
                  <div v-if="idx === navIndex">
                    <div class="arrow"></div>
                  </div>
                </div>
              </div>
              <div class="s-input" v-if="stab == 'common'">
                <div class="global-search-wrapper">
                  <a-auto-complete
                    :value="searchValue"
                    style="width: 100%"
                    @select="onSelect"
                    @search="onSearch"
                    @change="onChange"
                    :placeholder="'如：' + arrHot[0].name">
                    <template slot="dataSource">
                      <a-select-option v-for="item in dataSource" :key="String(item.list_id)">
                          <div>
                            {{item.name}}
                          </div>
                      </a-select-option>
                    </template>
                  </a-auto-complete>
                  <!-- <a-auto-complete
                    v-model="searchValue"
                    class="global-search"
                    size="large"
                    style="width: 100%"
                    @search="handleSearch"
                    :placeholder="'如：' + arrHot[0].name"
                    optionLabelProp="text"
                  >
                  </a-auto-complete> -->
                </div>

                <!-- <div class="search-list" v-if="dataSource.length">
                  <div v-for="(item, index) in dataSource" :key="index" class="sl-item" @click="jumpGameList(item)">
                    {{item.name}}
                  </div>
                </div> -->


              </div>
 
              <a-button type="primary" class="search-btn" icon="search" @click="onSearchT"></a-button>
              <!-- <li class="search-btn" style="border-right: 1px solid #ddd;">
                <a-input-search placeholder="请输入搜索关键字" @search="onSearchT" enterButton />
              </li> -->
            </div>

          </div>
          <div class="hot">
            <p v-for="(item,index) in arrHot" :key="index" @click="onJump(item)" :class="{'hot-one': index == 0}">{{item.name}}</p>
          </div>
          <div class="fli" v-if="fliSoft">
            <div class="close" @click.stop="selectTag(-1)">×</div>
            <div v-if="idx == 0">
              <a-row type="flex" justify="space-between" class="ls">
                <!-- <a-col :span="8">
                  <a-input-search placeholder="请输入搜索关键字" @search="onSearch" />
                </a-col>-->
                <a-col :span="16"></a-col>
              </a-row>
              <div class="letter-box">
                <div
                  v-for="(item,index) in arr"
                  :key="index"
                  class="letter"
                  :style="index == 0 ? 'width:60px;':''"
                >
                  <div
                    class="f"
                    :class="letterIdx === index ?'fselect':''"
                    :style="index == 0 ? 'width:36px; margin: 0 auto;':''"
                    @click="letterTag(item.data,index)"
                  >{{item.data}}</div>

                  <div class="line" v-if="index != arr.length - 1 && index != 0"></div>
                </div>
              </div>
            </div>
            <div v-if="idx != 0">
              <div class="lh">
                请选择：
                <span style="color:#0084ff;" @click.stop="alls">全部</span>
              </div>
            </div>
            <a-row type="flex" class="lm-list">
              <a-col
                :span="4"
                v-for="(item,index) in arrT"
                :key="index"
                class="lm-item"
                @click="itemTag(item)"
              >{{item.name}}</a-col>
            </a-row>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { GAT_LIST, GAT_CATE, GAT_WOW } from "./server";
export default {
  data() {
    return {
      fliSoft: false,
      idx: -1,
      stab: 'advanced',
      arrNav: [
        { id: "", name: "游戏名称" },
        { id: "", name: "商品分类" },
        { id: "", name: "游戏区" },
        { id: "", name: "游戏服务区" }
      ],
      arr: [
        { data: "全部" },
        { data: "A" },
        { data: "B" },
        { data: "C" },
        { data: "D" },
        { data: "E" },
        { data: "F" },
        { data: "G" },
        { data: "H" },
        { data: "I" },
        { data: "J" },
        { data: "K" },
        { data: "L" },
        { data: "M" },
        { data: "N" },
        { data: "O" },
        { data: "P" },
        { data: "Q" },
        { data: "R" },
        { data: "S" },
        { data: "T" },
        { data: "U" },
        { data: "V" },
        { data: "W" },
        { data: "X" },
        { data: "Y" },
        { data: "Z" }
      ],
      letterIdx: 0,
      arrList: [],
      arrWowTwo: [],
      arrT: [],
      arrHot: [],
      searchValue: '',
      dataSource: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    selectTag(idx) {
      this.fliSoft = idx > -1 ? true : false;
      this.idx = idx;
      switch (idx) {
        case 0:
          this.arrT = this.arrList;
          this.letterIdx = 0;

          break;
        case 1:
          this.arrT = [];
          this.getCate();
          break;
        case 2:
          this.arrT = [];
          this.getWow();
          break;
        case 3:
          this.arrT = this.arrWowTwo;
          break;
      }
    },
    alls() {
      this.arrNav[this.idx].name = "全部";
      this.arrNav[this.idx].id = "";
      this.selectTag(-1);
    },
    letterTag(n, idx) {
      this.letterIdx = idx;
      this.arrT = [];
      if (n === "全部") {
        this.arrT = this.arrList;
      } else {
        this.arrList.forEach(ele => {
          if (ele.chart === n) this.arrT.push(ele);
        });
      }
    },
    itemTag(item) {
      let name;
      let id;
      switch (this.idx) {
        default:
          name = item.name;
          id = item.list_id;
          break;
        case 1:
          name = item.name;
          id = item.cate_id;
          break;
        case 2:
          name = item.name;
          id = item.wow_de_id;
          this.arrWowTwo = item.two || [];
          break;
        case 3:
          name = item.name;
          id = item.wow_de_id;
          break;
      }
      this.arrNavR(this.idx);
      this.arrNav[this.idx].name = name;
      this.arrNav[this.idx].id = id;
      this.selectTag(-1);
    },
    arrNavR(n) {
      let arr = [
        { id: "", name: "游戏名称" },
        { id: "", name: "商品分类" },
        { id: "", name: "游戏区" },
        { id: "", name: "游戏服务区" }
      ];
      arr.forEach((ele, i) => {
        if (i > n) {
          this.arrNav[i] = ele;
        }
      });
    },
    onSearchT(v) {

      if (this.stab == 'advanced') {
        //高级搜索
        if (this.arrNav[0].name === "游戏名称") {
          this.$error({
            title: "请选择游戏！"
          });
        } else {
          let json = {
            list: this.arrNav[0].id,
            cate_id: this.arrNav[1].id ? this.arrNav[1].id : "",
            cate_name: this.arrNav[1].id ? this.arrNav[1].name : "",
            wow_id: this.arrNav[2].id ? this.arrNav[2].id : "",
            wow_name: this.arrNav[2].id ? this.arrNav[2].name : "",
            twow_id: this.arrNav[3].id ? this.arrNav[3].id : "",
            twow_name: this.arrNav[3].id ? this.arrNav[3].name : "",
            search: v,
            type: "search"
          };
          this.$router.push({
            name: "game-list",
            params: json
          });
          this.$store.commit("arrNav", json);
          if (
            this.$route.params.list &&
            this.$route.params.list == this.arrNav[0].id
          ) {
            this.$store.commit("arrNavNum");
          }
          this.arrNav = [
            { id: "", name: "游戏名称" },
            { id: "", name: "商品分类" },
            { id: "", name: "游戏区" },
            { id: "", name: "游戏服务区" }
          ];
        }
      } else if (this.stab == 'common') {
        // 普通搜索
        this.$store.commit("search", this.searchValue);
        this.$router.push({
          name: "game",
          params: {
            search: this.searchValue
          }
        });
        this.dataSource = []
      }

    },
    onJump(item) {
      this.$router.push({
        name: "game-list",
        params: {
          list: item.list_id
        }
      });
    },
    getList() {
      GAT_LIST().then(res => {
        if (!res) return;
        this.arrT = [...res.data.list];
        this.arrList = [...res.data.list];
        this.arrHot = res.data.hot;
      });
    },
    getCate() {
      if (!this.arrNav[0].id) return;
      GAT_CATE({ list_id: this.arrNav[0].id, lv: 1 }).then(res => {
        if (!res) return;
        this.arrT = res.data;
      });
    },
    getWow() {
      if (!this.arrNav[0].id) return;
      GAT_WOW({ list_id: this.arrNav[0].id, lv: 1 }).then(res => {
        if (!res) return;
        this.arrT = res.data;
      });
    },
    changeTab (tab) {
      
      if (tab == 'common') {
        this.idx = -1
        this.fliSoft = false
      } else if (tab == 'advanced') {
        this.dataSource = []
        this.searchValue = ''
        this.$store.commit("search", '');
      }
      this.stab = tab
    },

    // handleSearch(value) {
    //   GAT_LIST({
    //     search: value
    //   }).then(res => {
    //     if (res == null) {
    //       this.dataSource = []
    //     }else {
    //       this.dataSource = res.data
    //     }
    //   });
    // },
    // jumpGameList(item) {
    //   this.dataSource = []
    //   this.searchValue = ''
    //   this.$store.commit("search", '');
    //   // console.log(item, 343)
    //   let json = {
    //     list: item.list_id,
    //     cate_id: "",
    //     cate_name: "",
    //     wow_id: "",
    //     wow_name: "",
    //     twow_id: "",
    //     type: "search"
    //   }
    //   this.$router.push({
    //     name: "game-list",
    //     params: json
    //   })
    // },
    onSearch(searchText) {
      if (!searchText) {
        this.dataSource = []
      } else {
          GAT_LIST({
            search: searchText
          }).then(res => {
            if (res != null) {
              this.dataSource = res.data
            } else {
              this.dataSource = []
            }
          });
      }
    },
    onSelect(value) {
      this.searchValue = ''
      this.dataSource = []
      this.$store.commit("search", '');
      let json = {
        list: value,
        cate_id: "",
        cate_name: "",
        wow_id: "",
        wow_name: "",
        twow_id: "",
        type: "search"
      }
      this.$router.push({
        name: "game-list",
        params: json
      })
    },
    onChange(value) {
      // console.log(value)
      this.searchValue = value;
    }
  }
};
</script>
<style lang="less" scoped>
.header2 {
  width: 100%;
  background-color: #fff;
  padding: 20px 0;
}
.s-wrap {
  width: 73%;
  margin-left: 27%;
  .sw-tab {
    display: flex;
    .st-item {
      width: 65px;
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      color: #23a400;
      cursor: pointer;
      text-align: center;
    }
    .active {
      background-color: #0084ff;
      border-radius: 6px 6px 0px 0px;
      color: #fff; 
    }
  }
  .search {
    position: relative;
    height: 40px;
    // display: flex;
    // justify-content: flex-end;
    font-size: 14px;
    border: 2px solid #0084ff;
    padding-right: 48px;
    .adv-wrap {
      width: 100%;
      display: flex;
      .adv-item {
        border-right: 1px solid #ddd;
        text-align: center;
        background-color: #f6f6f6;
        width: 106px;
        position: relative;
        .tit {
          line-height: 36px;
          overflow: hidden;
          cursor: pointer;
        }
      }
      .adv-item:last-child {
        width: 109px;
      }
    }
    .s-input {
      position: relative;
      & /deep/ .ant-input {
        height: 36px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        font-size: 14px;
        border: 0;
      }
      &/deep/.ant-input:hover {
        border: 0 !important;
        border-color: #fff !important;
      }
      &/deep/.ant-input:focus {
        border: 0 !important;
        border-color: #fff !important;
        box-shadow: none;
      }
      &/deep/.ant-select-selection__rendered {
        height: 36px;
      }
      &/deep/.ant-select-search__field__wrap {
        display: flex;
      }
      .search-list {
        padding: 2px 0;
        position: absolute;
        top: 42px;
        left: 6px;
        width: 300px;
        background: #fff;
        border-radius: 6px;
        box-shadow: 2px 2px 5px #333;
        z-index: 100;
        .sl-item {
          padding: 5px 10px;
          cursor: pointer;
          &:hover {
            background: #e6f7ff;
          }
        }
        .sl-item:first-child {
          border-top-left-radius: 6px;
          border-top-right-radius: 6px;
        }
        .sl-item:last-child {
          border-bottom-left-radius: 6px;
          border-bottom-right-radius: 6px;
        }
      }
    }
    .search-btn {
      position: absolute;
      width: 48px;
      height: 36px;
      right: 0;
      top: 0;
      border-radius: 0;
    }
    // &/deep/.ant-input-search {
    //   width: 101% !important;
    // }
    // &/deep/.ant-input:hover {
    //   border: 0 !important;
    //   border-color: #fff !important;
    // }
    // &/deep/.ant-input:focus {
    //   border: 0 !important;
    //   border-color: #fff !important;
    //   box-shadow: none;
    // }
    // &/deep/.ant-input {
    //   height: 36px;
    //   width: 0;
    //   padding: 0;
    //   border: 0;
    // }
    // &/deep/ button {
    //   height: 36px;
    //   border: 0;
    //   border-radius: 0;
    // }
    // .s-input {
    //   width: 100%;
    //   & /deep/ .ant-input {
    //     padding-left: 10px;
    //     width: 100% !important;
    //   }
    // }
    // li {
    //   border-right: 1px solid #ddd;
    //   text-align: center;
    //   background-color: #f6f6f6;
    //   width: 106px;
    //   position: relative;
    //   .tit {
    //     line-height: 40px;
    //     overflow: hidden;
    //     cursor: pointer;
    //   }
    // }
  }
}
.fli {
  position: absolute;
  right: 0;
  top: 76px;
  width: 776px;
  padding: 10px 0;
  border: 2px solid #0084ff;
  background-color: #fff;
  z-index: 999;
  .close {
    position: absolute;
    top: -10px;
    right: 12px;
    width: 18px;
    height: 18px;
    font-weight: 400;
    font-size: 32px;
    cursor: pointer;
  }
  .ls {
    margin: 20px 0;
    padding: 0 10px;

    .ls-r {
      padding: 0 10px;
      text-align: left;
    }
    .ls-r span {
      cursor: pointer;
    }
  }
  .letter-box {
    width: 100%;
    height: 32px;
    background-color: #f6f6f6;
    display: flex;
    flex-wrap: wrap;
    padding: 4px 10px 0 10px;
    .letter {
      width: 26px;
      height: 26px;
      margin-bottom: 2px;
      position: relative;
      font-size: 16px;
      padding: 0 3px;
      cursor: pointer;
      .f {
        text-align: center;
        &:hover {
          color: #0084ff;
          border-bottom: 2px solid #0084ff;
        }
      }
      .fselect {
        color: #0084ff;
        border-bottom: 2px solid #0084ff;
      }
      .line {
        position: absolute;
        right: 0;
        top: 6px;
        width: 1px;
        height: 14px;
        background: #e1e1e1;
      }
    }
  }
  .lh {
    width: 96%;
    margin: 0 auto;
    line-height: 36px;
    height: 36px;
    border-bottom: 1px solid #0084ff;
    font-size: 12px;
    cursor: pointer;
  }
  .lm-list {
    padding-top: 10px;
    .lm-item {
      font-size: 12px;
      margin-bottom: 8px;
      text-align: left;
      padding-left: 12px;
      cursor: pointer;
    }
  }
}

.arrow {
  position: absolute;
  left: 40px;
  bottom: -10px;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 11px;
  border-top-width: 0;
  border-bottom-color: #0084ff;
  z-index: 1000;
  &::after {
    z-index: 2;
    position: absolute;
    top: 3px;
    left: -9px;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 9px;
    border-top-width: 0;
    content: " ";
    border-bottom-color: #fff;
  }
}
.hot {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  .hot-one {
    color: red;
  }
  p {
    margin-left: 12px;
    cursor: pointer;
  }
}
.logo {
  margin-left: 84px;
}
</style>
